<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stm32示例</title>
    <h1>stm32环境变量实时监测</h1>
    <style>
        /* 全局样式重置，确保不同浏览器的默认样式一致性 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 整体页面布局与背景设置 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-image: url('beijing2.jpg'); /* 设置背景图片路径，记得替换为实际图片路径 */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* 页面头部导航栏样式 */
        nav {
            width: 100%;
            background-color: #0707a5;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            padding: 10px 0;
            text-align: center;
            display: flex;
            justify-content: center;
            border-bottom: 2px solid #555;
        }

        nav a {
            text-decoration: none;
            color: #ccc;
            font-weight: bold;
            margin: 0 20px;
            transition: color 0.3s ease;
            display: flex;
            align-items: center;
            background: linear-gradient(to bottom, #333, #333);
            padding: 5px 10px;
            border-radius: 3px;
        }

        nav a:hover {
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
            background: linear-gradient(to bottom, #555, #111);
            transition: all 0.3s ease;
        }

        /* 对输入框和按钮所在的区域（表单及相关容器）设置样式 */
    .main-content {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            padding: 40px;
            width: 80%;
            max-width: 800px;
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative; /* 为设置中间白色区域背景图做准备，添加相对定位 */
        }

      /* .main-content::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('neijing2.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.2;
            z-index: -1;
        } */

      .main-content:hover {
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        }

        /* 标题样式，使其更加突出 */
        h1 {
            color: #333;
            text-align: center;
            font-size: 36px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        /* 每个输入框和对应的标签设置样式 */
        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: bold;
            font-size: 18px;
        }

        input[type="text"] {
            width: 100%;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            transition: border-color 0.3s ease;
            margin-bottom: 20px;
            background-color: #f9f9f9;
            font-size: 16px;
        }

        /* 美化开关按键样式 */
    .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

      .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

      .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition:.4s;
            transition:.4s;
        }

      .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition:.4s;
            transition:.4s;
        }

        input:checked +.slider {
            background-color: #2196F3;
        }

        input:checked +.slider:before {
            -webkit-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* 圆角样式 */
      .slider.round {
            border-radius: 34px;
        }

      .slider.round:before {
            border-radius: 50%;
        }

        /* 开关文字样式 */
      .switch-label {
            font-size: 16px;
            color: #333;
            vertical-align: middle;
        }

        /* 开关容器样式，用于双列布局和背景图片设置 */
      .switch-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        /* 每个开关的整体样式，设置背景图片和其他通用样式 */
      .switch-item {
            width: 48%;
            margin-bottom: 20px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            padding: 20px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 为每个开关项的白框添加背景图片 */
      /* .switch-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('jianjian.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.3; 
            z-index: -1; 
        } */

        /* 开关文本样式，设置颜色和对齐方式 */
      .switch-text {
            color: #3778da;
            text-align: center;
            margin-bottom: 10px;
        }

        /* 开关图标样式，设置大小和对齐方式 */
      .switch-icon {
            width: 30px;
            height: 30px;
            margin: 0 auto;
            display: block;
        }

        /* 关联开关按键与对应文本及图标 */
      .switch-content {
            display: flex;
            align-items: center;
        }

        /* 开关切换时文本颜色变化效果 */
      .switch-checkbox:checked +.switch-label {
            color: #132fcf;
        }

         /* 给温度输入框添加特殊样式 */
         #temp {
            background-color: #a7afd0;
            color: #1219d0;
            border: 2px solid #1f35c5;
            border-radius: 8px;
            box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        #hum {
            background-color: #aaabd0;
            color: #231ec4;
            border: 2px solid #271fc3;
            border-radius: 8px;
            box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        #bat {
            background-color: #aaabd0;
            color: #231ec4;
            border: 2px solid #271fc3;
            border-radius: 8px;
            box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
            position: relative;
        }


    </style>

    <script>


        function onled() {
            var xhr = new XMLHttpRequest();
            // 创建XMLHttpRequest对象
            var url = "";
            // 请求的URL

            xhr.open("POST", url, true);
            // 配置请求：POST方法、URL、异步请求

            var post_req = {
                "type": 2,
                "data": { "key": 306, val: 1 }

            };
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求完成且成功
                    var response = xhr.responseText;
                    // 获取响应数据
                    var info = JSON.parse(response);
                    // 将json字符串反序列化为json对象
                    console.log(info);

                }
            };

            // 将json对象序列化为json字符串
            xhr.send(JSON.stringify(post_req));
        }

        function offled() {

            var xhr = new XMLHttpRequest();
            // 创建XMLHttpRequest对象
            var url = "";
            // 请求的URL

            xhr.open("POST", url, true);
            // 配置请求：POST方法、URL、异步请求

            var post_req = {
                "type": 2,
                "data": { "key": 306, val: 0 }

            };
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求完成且成功
                    var response = xhr.responseText;
                    // 获取响应数据
                    var info = JSON.parse(response);
                    // 将json字符串反序列化为json对象
                    console.log(info);

                }
            };

            // 将json对象序列化为json字符串
            xhr.send(JSON.stringify(post_req));
        }

        function onbeep() {
            var xhr = new XMLHttpRequest();
            // 创建XMLHttpRequest对象
            var url = "";
            // 请求的URL

            xhr.open("POST", url, true);
            // 配置请求：POST方法、URL、异步请求

            var post_req = {
                "type": 2,
                "data": {"key":307,val:1}

            };
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求完成且成功
                    var response = xhr.responseText;
                    // 获取响应数据
                    var info = JSON.parse(response);
                    // 将json字符串反序列化为json对象
                    console.log(info);
                    
                }
            };

            // 将json对象序列化为json字符串
            xhr.send(JSON.stringify(post_req));
        }

        function offbeep() {
            var xhr = new XMLHttpRequest();
            // 创建XMLHttpRequest对象
            var url = "";
            // 请求的URL

            xhr.open("POST", url, true);
            // 配置请求：POST方法、URL、异步请求

            var post_req = {
                "type": 2,
                "data": {"key":307,val:0}

            };
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求完成且成功
                    var response = xhr.responseText;
                    // 获取响应数据
                    var info = JSON.parse(response);
                    // 将json字符串反序列化为json对象
                    console.log(info);
                    
                }
            };

            // 将json对象序列化为json字符串
            xhr.send(JSON.stringify(post_req));
        }

        function onfan() {
            var xhr = new XMLHttpRequest();
            // 创建XMLHttpRequest对象
            var url = "";
            // 请求的URL

            xhr.open("POST", url, true);
            // 配置请求：POST方法、URL、异步请求

            var post_req = {
                "type": 2,
                "data": {"key":308,val:1}

            };
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求完成且成功
                    var response = xhr.responseText;
                    // 获取响应数据
                    var info = JSON.parse(response);
                    // 将json字符串反序列化为json对象
                    console.log(info);
                    
                }
            };

            // 将json对象序列化为json字符串
            xhr.send(JSON.stringify(post_req));
        }

        function offfan() {
            var xhr = new XMLHttpRequest();
            // 创建XMLHttpRequest对象
            var url = "";
            // 请求的URL

            xhr.open("POST", url, true);
            // 配置请求：POST方法、URL、异步请求

            var post_req = {
                "type": 2,
                "data": {"key":308,val:0}

            };
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求完成且成功
                    var response = xhr.responseText;
                    // 获取响应数据
                    var info = JSON.parse(response);
                    // 将json字符串反序列化为json对象
                    console.log(info);
                    
                }
            };
            // 将json对象序列化为json字符串
            xhr.send(JSON.stringify(post_req));
        }

        setInterval(function() {
                init();
                }, 2000);

        function init() {
            refresh();
        }

        function refresh() {
            var xhr = new XMLHttpRequest();
            var url = "";

            xhr.open("POST", url, true);

            var post_req = {
                "type": 1,
                "limit": "all"
            };

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = xhr.responseText;
                    var info = JSON.parse(response);
                    console.log(info);
                    for (var i = 0; i < info.data.length; i++) {
                        if (info.data[i].key == 303) {
                            document.getElementById('temp').value = info.data[i].val;
                        } else if (info.data[i].key == 304) {
                            document.getElementById('hum').value = info.data[i].val;
                        }                       
                        else if (info.data[i].key == 302) {
                            document.getElementById('bat').value = info.data[i].val;
                        } 
                                                                            
                        // else if (info.data[i].key == 307) {
                        //     document.getElementById('fire').value = info.data[i].val;
                        // } else if (info.data[i].key == 308) {
                        //     document.getElementById('air').value = info.data[i].val;
                        // }


                        if (info.data[i].key == 306) {
                            if (info.data[i].val == 1) {
                                document.getElementById('light-switch-checkbox').checked = true;
                            } else {
                                document.getElementById('light-switch-checkbox').checked = false;
                            }
                        }
                        if (info.data[i].key == 307) {
                            if (info.data[i].val == 1) {
                                document.getElementById('fire-switch-checkbox').checked = true;
                            } else {
                                document.getElementById('fire-switch-checkbox').checked = false;
                            }
                        }
                        if (info.data[i].key == 308) {
                            if (info.data[i].val == 1) {
                                document.getElementById('air-switch-checkbox').checked = true;
                            } else {
                                document.getElementById('air-switch-checkbox').checked = false;
                            }
                        }




                    }
                }
            };

            xhr.send(JSON.stringify(post_req));
        }
    </script>
</head>

<body onload="init()">
    <nav>
        <a href="index.html">主页</a>
        <a href="stm32.html">stm32示例页面</a>
        <a href="modbus.html">modbus示例页面</a>
        <a href="shipin.html">视频监控页面</a>
    </nav>

    <div class="main-content">
        <form>
            <br />
            <label for="temp">温度</label>
            <input type="text" id="temp" value="" />
            <br />
            <label for="hum">湿度</label>
            <input type="text" id="hum" value="" />
            <br />
            <label for="hum">电量</label>
            <input type="text" id="bat" value="" />
            <br />
            <div class="switch-container">
                <div class="switch-item light-switch">
                    <div class="switch-content">
                        <!-- <img src="diandeng.svg" alt="灯图标" class="switch-icon"> -->
                        <span class="switch-label">灯</span>
                    </div>
                    <div class="switch">
                        <input type="checkbox" id="light-switch-checkbox" onclick="if(this.checked) {onled();} else {offled();}">
                        <label class="slider round" for="light-switch-checkbox"></label>
                    </div>
                </div>

                <div class="switch-item fire-switch">
                    <div class="switch-content">
                        <!-- <img src="yanwu.svg" alt="烟雾报警图标" class="switch-icon"> -->
                        <span class="switch-label">烟雾报警</span>
                    </div>
                    <div class="switch">
                        <input type="checkbox" id="fire-switch-checkbox" onclick="if(this.checked) {onbeep();} else {offbeep();}">
                        <label class="slider round" for="fire-switch-checkbox"></label>
                    </div>
                </div>

                <div class="switch-item air-switch">
                    <div class="switch-content">
                        <!-- <img src="kt.svg" alt="空调图标" class="switch-icon"> -->
                        <span class="switch-label">空调</span>
                    }
                    <div class="switch">
                        <input type="checkbox" id="air-switch-checkbox" onclick="if(this.checked) {onfan();} else {offfan();}">
                        <label class="slider round" for="air-switch-checkbox"></label>
                    }
                </div>

                <!-- 如果还有其他开关，可以继续添加类似的div元素 -->
            }
        </form>
    }
</body>

</html>